release 수정 내역

PCcss/layout.css

@@ -2805,3 +2805,79 @@ body > .wrap.category, body > .wrap.brand {overflow: visible;}
2805 .review-prompt .review-goods__brand,
2806 .review-prompt .review-goods__date { display: block; font-size: 13px; color: #888; }
2807 .review-prompt .review-goods__name { font-size: 15px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 3px 0 6px; }
2808+
2809+/* 2607 site loading Type 03 */
2810+.progress-loading {
2811+ display: flex;
2812+ align-items: center;
2813+ justify-content: center;
2814+ position: fixed;
2815+ top: 0;
2816+ right: 0;
2817+ bottom: 0;
2818+ left: 0;
2819+ z-index: 500;
2820+}
2821+.progress-loading__inner {
2822+ position: relative;
2823+ width: 150px;
2824+ text-align: center;
2825+}
2826+.progress-loading__logo {
2827+ display: block;
2828+ position: relative;
2829+ width: 150px;
2830+ height: 21px;
2831+ background-color: #000;
2832+ z-index: 1;
2833+ -webkit-mask: url('../images/loading_type03_logo.svg') no-repeat center / contain;
2834+ mask: url('../images/loading_type03_logo.svg') no-repeat center / contain;
2835+}
2836+.progress-loading__track {
2837+ position: relative;
2838+ width: 100%;
2839+ height: 4px;
2840+ margin-top: 10px;
2841+ overflow: hidden;
2842+ background-color: #b7b7b7;
2843+ box-sizing: border-box;
2844+ z-index: 1;
2845+}
2846+.progress-loading__bar {
2847+ display: block;
2848+ width: 0;
2849+ height: 100%;
2850+ background-color: #ff5b37;
2851+ animation: progressLoadingBar 2s linear infinite;
2852+}
2853+.progress-loading--dimd-full {
2854+ background-color: rgba(255, 255, 255, .8);
2855+}
2856+.progress-loading--circle .progress-loading__inner {
2857+ width: 120px;
2858+}
2859+.progress-loading--circle .progress-loading__inner:before {
2860+ content: '';
2861+ position: absolute;
2862+ top: 50%;
2863+ left: 50%;
2864+ width: 160px;
2865+ height: 160px;
2866+ border-radius: 50%;
2867+ background-color: rgba(255, 255, 255, .7);
2868+ transform: translate(-50%, -50%);
2869+}
2870+.progress-loading--circle .progress-loading__logo {
2871+ width: 120px;
2872+}
2873+.progress-loading--circle .progress-loading__track {
2874+ background-color: #b7b7b7;
2875+}
2876+@keyframes progressLoadingBar {
2877+ 0% {
2878+ width: 0;
2879+ }
2880+ 100% {
2881+ width: 100%;
2882+ }
2883+}

PChtml/circle.html

@@ -349,6 +349,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
349 }
350 });
351 </script>
352+<!-- 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 -->
353+<!--
354 <div class="loading_box" style="display:none;">
355 <div class="loading_bar"></div>
356 <div class="loading_txt_box">
@@ -359,6 +361,15 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
361 </div>
362 <p class="loading_txt">LOADING</p>
363 </div>
364+</div>
365+-->
366+<div class="progress-loading progress-loading--circle" role="status" aria-label="페이지 로딩 중">
367+ <div class="progress-loading__inner">
368+ <span class="progress-loading__logo" aria-hidden="true"></span>
369+ <div class="progress-loading__track" aria-hidden="true">
370+ <span class="progress-loading__bar"></span>
371+ </div>
372+ </div>
373 </div>
374 <!-- /header -->
375
@@ -371,6 +382,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
382 });
383 </script>
384 <style>
385+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
386+ /*
387 .loading_box{
388 background-color: transparent !important;
389 }
@@ -383,6 +396,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
396 .loading_box .loading_txt_box .loading_move p{
397 background-color: #000;
398 }
399+ */
400 </style>
401 <!-- 220928 389 세이프티 에이스트레이더 스크립트 설치 요청(9/28일까지 설치요청) -->
402 <script type="text/javascript" src="//static.tagmanager.toast.com/tag/view/1964"></script>

PChtml/dimdFull.html

@@ -349,6 +349,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
349 }
350 });
351 </script>
352+<!-- 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 -->
353+<!--
354 <div class="loading_box" style="display:none;">
355 <div class="loading_bar"></div>
356 <div class="loading_txt_box">
@@ -359,6 +361,15 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
361 </div>
362 <p class="loading_txt">LOADING</p>
363 </div>
364+</div>
365+-->
366+<div class="progress-loading progress-loading--dimd-full" role="status" aria-label="페이지 로딩 중">
367+ <div class="progress-loading__inner">
368+ <span class="progress-loading__logo" aria-hidden="true"></span>
369+ <div class="progress-loading__track" aria-hidden="true">
370+ <span class="progress-loading__bar"></span>
371+ </div>
372+ </div>
373 </div>
374 <!-- /header -->
375
@@ -371,6 +382,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
382 });
383 </script>
384 <style>
385+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
386+ /*
387 .loading_box{
388 background-color: transparent !important;
389 }
@@ -383,6 +396,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
396 .loading_box .loading_txt_box .loading_move p{
397 background-color: #000;
398 }
399+ */
400 </style>
401 <!-- 220928 389 세이프티 에이스트레이더 스크립트 설치 요청(9/28일까지 설치요청) -->
402 <script type="text/javascript" src="//static.tagmanager.toast.com/tag/view/1964"></script>

PChtml/dimdNot.html

@@ -349,6 +349,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
349 }
350 });
351 </script>
352+<!-- 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 -->
353+<!--
354 <div class="loading_box" style="display:none;">
355 <div class="loading_bar"></div>
356 <div class="loading_txt_box">
@@ -359,6 +361,15 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
361 </div>
362 <p class="loading_txt">LOADING</p>
363 </div>
364+</div>
365+-->
366+<div class="progress-loading progress-loading--dimd-not" role="status" aria-label="페이지 로딩 중">
367+ <div class="progress-loading__inner">
368+ <span class="progress-loading__logo" aria-hidden="true"></span>
369+ <div class="progress-loading__track" aria-hidden="true">
370+ <span class="progress-loading__bar"></span>
371+ </div>
372+ </div>
373 </div>
374 <!-- /header -->
375
@@ -371,6 +382,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
382 });
383 </script>
384 <style>
385+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
386+ /*
387 .loading_box{
388 background-color: transparent !important;
389 }
@@ -383,6 +396,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
396 .loading_box .loading_txt_box .loading_move p{
397 background-color: #000;
398 }
399+ */
400 </style>
401 <!-- 220928 389 세이프티 에이스트레이더 스크립트 설치 요청(9/28일까지 설치요청) -->
402 <script type="text/javascript" src="//static.tagmanager.toast.com/tag/view/1964"></script>

PCjs/common.js

@@ -5,6 +5,7 @@ var commonFunc = function(){};
5 let isFirst = true;
6
7 // 로딩
8+// 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
9 // var $loading = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
10
11 var api_domain = location.protocol+"//"+location.hostname+":"+location.port;
@@ -387,6 +388,7 @@ var keymall = {
388
389 var option = args.option != undefined ? args.option : {};
390 var loading = option.loading != undefined ? option.loading : false;
391+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
392 // if($(".loading_box").length <= 0){
393 // $loadDiv = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
394 // }
@@ -436,9 +438,10 @@ var keymall = {
438 // $loadDiv.fadeOut();
439 }
440 //로딩바 사용 유무에 따라
439- if(args.useLoadingBar){
440- $('.loading_box').css("display","none");
441- }
441+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
442+ // if(args.useLoadingBar){
443+ // $('.loading_box').css("display","none");
444+ // }
445 },
446 success : function(data) {
447 //console.log('success callback');